<template>
  <!-- 专辑模块 -->
  <div class="mod-alb">
    <div class="container">
      <div class="alb-hd">
        <h3>
          <span class="alb-title">{{ cTitle }}</span>
        </h3>
        <div class="alb-area">
          <a
            href="javascript:;"
            class="alb-classify"
            @click="changeArea('ALL')"
          >
            全部
          </a>
          <a href="javascript:;" class="alb-classify" @click="changeArea('ZH')">
            华语
          </a>
          <a href="javascript:;" class="alb-classify" @click="changeArea('EA')">
            欧美
          </a>
          <a href="javascript:;" class="alb-classify" @click="changeArea('KR')">
            韩国
          </a>
          <a href="javascript:;" class="alb-classify" @click="changeArea('JP')">
            日本
          </a>
        </div>
      </div>
      <ul class="alb-lists clearfix">
        <li class="alb-item" v-for="(item, index) in albums" :key="index">
          <disc :item="item"></disc>
          <!-- <span style="width: 190px; height: 190px; margin-right: 20px"></span> -->
          <!-- <p>1231</p> -->
        </li>
      </ul>
      <div class="alb-el-pagination" v-if="listsTotal > 35">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="listsTotal"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Disc from "components/disc/Disc.vue";

export default {
  components: {
    Disc,
  },
  data() {
    return {
      cTitle: "全部新碟",
      currentPage: 1,
      pageSize: 35,
      listsTotal: 0,
      albums: [],
      area: "ALL",
      areas: {
        ALL: "全部新碟",
        ZH: "华语",
        EA: "欧美",
        KR: "韩国",
        JP: "日本",
      },
    };
  },
  mounted() {
    this.getAlbums();
  },
  methods: {
    changeArea(area) {
      // console.log(area);
      this.area = area;
      this.cTitle = this.areas[area];
      this.currentPage = 1;
      this.getAlbums();
    },
    handleCurrentChange() {
      this.getAlbums();
      // 点击分页后，页面滚动到歌单顶部
      document.documentElement.scrollTo({ top: 141, behavior: "smooth" });
    },
    getAlbums() {
      this.axios({
        url:
          "/album/new?limit=35&area=" +
          this.area +
          "&offset=" +
          (this.currentPage - 1) * 35,
      })
        .then((res) => {
          this.albums = res.data.albums;
          this.listsTotal = res.data.total;
          // console.log(this.albums);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.mod-alb {
  padding-top: 50px;
  background-color: var(--color-theme-light-5);
}
.alb-hd {
  position: relative;
  height: 50px;
}
.alb-hd h3 {
  float: left;
  font-size: 24px;
  font-weight: normal;
}
.alb-title {
  padding-right: 20px;
  padding-left: 20px;
}
.alb-area {
  position: absolute;
  left: 150px;
  top: 8px;
}
.alb-classify {
  font-size: 14px;
  color: #999;
  margin-right: 10px;
}
.alb-classify:hover {
  color: var(--color-theme);
}
.alb-lists {
  margin-right: -20px;
}
.alb-item {
  width: 20%;
  float: left;
}
.alb-el-pagination {
  position: relative;
  text-align: center;
  margin: 20px auto;
}
</style>